import React, { Component } from 'react';
import { Layout, Icon, Menu, Dropdown, message } from 'antd';
import { HashRouter, Switch, Route } from 'react-router-dom';
import '../layout.css';
import '../views/css/bases.css';
import 'antd/dist/antd.css';
import imgs from '../images/logo-colour.svg';
import LeftMenu from '../component/left';
import OpenMenu from '../component/openMenu';

import Role from '../views/auth/role';
import Auth from '../views/auth/auth';
import Userinfo from './auth/adminInfo';
import Operatelogs from './operatelogs';
import Advertisement from '../views/advertising';

import Richtext from '../views/website/richText';
import Echarts from '../views/website/echarts';
import Wang from '../component/wang';
const { Header, Content, Sider } = Layout;
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      userinfo: { name: 'cyclv' },
      menuOpen: JSON.parse(localStorage.getItem('menuOpen')) || { idx: 0, open: [], one:[], two:''},
    };
  }
  componentDidMount() {

  }
  onClick({ key }) {
    var that = this;
    if (key === '1') {
      // http.post(api.logout, '').then(res => {
      //   message.success('成功退出');
      //   localStorage.removeItem('userinfo')
      //   that.props.history.push('/login')
      // })
      message.success('成功退出');
      localStorage.removeItem('userinfo');
      that.props.history.push('/login');
    } else if (key === '2') {
      that.props.history.push('/admininfo');
    }
  };
  leftMenuBack = (info) => {
    localStorage.setItem('menuOpen', JSON.stringify(info))
    this.setState({ menuOpen: info })
  }
  openMenuBack = (info) => {
    localStorage.setItem('menuOpen', JSON.stringify(info))
    this.setState({ menuOpen: info })
  }
  render() {
    const menu = (
      <Menu onClick={this.onClick.bind(this)}>
        <Menu.Item key="1">退出登陆</Menu.Item>
        <Menu.Item key="2">我的信息</Menu.Item>
      </Menu>);
    return (
      <div className="Home">
        <Layout>
          <Header className="header">
            <div className="home-header flexsb">
              <img src={imgs} alt=''></img>
              {this.state.userinfo && <Dropdown overlay={menu}><p className="ant-dropdown-link">管理员：{this.state.userinfo.name}<Icon type="down" /></p></Dropdown>}
            </div>
          </Header>
          <Layout>
            <Sider className='mobilenone' width={200} style={{ background: '#fff' }}>
              <LeftMenu props={this.props} info={this.state.menuOpen} openMenuBack={this.leftMenuBack}></LeftMenu>
            </Sider>
            <Layout style={{ padding: '15px 0 15px 15px' }}> {/* style={{ padding: '24px 0 24px 24px' }} */}
              <OpenMenu props={this.props} info={this.state.menuOpen} openMenuBack={this.openMenuBack}></OpenMenu>
              <Content className='position-relative' style={{ background: '#fff', marginTop: '10px', minHeight: 280, overflowY: 'auto' }}>
                <HashRouter>
                  <Switch>
                    <Route path="/advertisement" component={Advertisement} />
                    <Route path="/wang" component={Wang} />
                    <Route path="/rolelist" component={Role} />
                    <Route path="/authlist" component={Auth} />
                    <Route path="/admininfo" component={Userinfo} />
                    <Route path="/operatelogs" component={Operatelogs} />
                    <Route path="/richtext" component={Richtext} />
                    <Route path="/echarts" component={Echarts} />
                  </Switch>
                </HashRouter>
              </Content>
            </Layout>
          </Layout>
        </Layout>
      </div>
    )
  }

}

export default App;
